<template>
  <div class="delivery-container">
    <ul class="delivery-content" v-for="(item) in list" :key="item.id">
      <li>{{item.city}}</li>
      <li>
        <img :src="item.img" alt />
      </li>
      <li>
        <span class="to-btn" @click="toCartClick(item)">+</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
export default {
  props: {
    list: {
      type: Array,
    },
  },
  methods: {
    ...mapActions("cart", ["updateToCart"]),
    toCartClick(item) {
      this.updateToCart(item);
      // this.$store.dispath.updateToCart();
      // this.$store.commit.updateToCart();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/_common.scss";
.to-btn {
  display: inline-block;
  padding: 5px 20px;
  // @include flex_center;
  font-size: 25px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  margin: 5px;
  background: indianred;
}
</style>